.navbar {
  color: white;
    bottom: 0; 
    width: 100%;
  }
  
  .navbar a {
    float: none;
    display: inline;
    width: 100%;
    color: white;
    text-align: center;
    padding: 12px 12px 20px 12px;
    text-decoration: none;
  }

  .navbar a:hover {
    background: rgb(124, 160, 160);
    color: rgb(227, 215, 215);
  }

  .main {
    background-color: rgb(33, 36, 38);
    margin-top: 30px;
    margin-bottom: 30px;
  }


  img {
    width: 40%;
    max-height: 40%;
    padding: 10px;}


  body {
  position: relative;
  background-color: rgb(33, 36, 38);
  font-family: 'Dosis';
  color: rgb(33, 36, 38);
  text-align: center;
  padding: 16px;
  padding-top: 60px;
  padding-bottom: 16px;
  font-size: 18px;
  }

  footer {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      background-color: rgb(124, 160, 160);
      text-align: center;
      padding: 20px;
    }
  

#Content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.Content-section{ 
  width: 600px;
  margin : 10px ;
  border : 1px solid white ;
  background-color: rgb(124, 160, 160) ;
  padding: 10px;
  text-align: justify;
  text-justify: inter-word;
}



.AboutMe, .Blog, .LearningPlan, .Skills, .Action, .CSSConcepts .EQ {
  min-height : 100px ;
}

body, h1, h2, h4, li, footer {
  color:white;
  font-family: 'Dosis', sans-serif;
}

h3 {
  color:rgb(6, 36, 27)
}
p {
  color:white;
  font-family: 'Dosis', sans-serif;
  text-align: justify;
  text-justify: inter-word;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 16px;
}

h5 {
  color:rgb(43, 82, 24)
}
 
footer {
  padding-top: 12px;
  padding-bottom: 12px;
}






@media only screen and (max-width: 1500px) {
.main {
  background-color: rgb(61, 115, 96);
}
  
body {
    background-color:rgb(61, 115, 96);
}

image {
  width: 110%;
  height:110%;
}
}

@media only screen and (max-width: 750px) {
  .main {
    background-color: rgb(219, 229, 74);
  }
    
  body {
      background-color:rgb(200, 189, 38);
  }
  
  image {
    width: 80%;
    height: 80%;
  }
  }


@media only screen and (max-width: 500px) {
  .main {
    background-color: rgb(117, 6, 106);
  }
    
  body {
      background-color:rgb(7, 127, 45);
  }
  
  image {
    width: 100%;
    height:100%;
  }
  }


/* @media and only screen and (min-width:480px) and (orientation:portrait) {
.portrait {
    background-color: black;
    height: 15%;
    width: 15%;
}
}

@media only screen and (min-width:480px) and (orientation:landscape){ 
.landscape {
    background-color: antiquewhite;
    height: 30px;
    width: 80px;
} */